<template>
	<view class="container">
		<scroll-view v-if="followerList.length!=0" scroll-y="true" @scrolltolower="handleToLower" style=" height: 100%;width: 100%">
			<view>
				<!-- 列表为空 -->
				<view v-if="followerList==[]" class="null">
					<view class="">
						<view class="null-pic">
							<image style="width: 193.82;height: 187.34;" src="@appstatic/my/my_icon_null.png" mode="aspectFit"></image>
						</view>
						<view class="null-text">
							<text>暂无数据</text>
						</view>
					</view>
				</view>
				<!--列表-->
				<view v-if="followerList!==[]" class="followerlist">
					<view v-for="(item,index) in followerList" class="row">
						<view class="left">
							<!--头像-->
							<image class="avature" @error="imgerror($event, index)" :src="item.userimages||'@appstatic/my/my_icon_avatar_unlogin.png'" mode=""></image>
							<!--下标-->
							<image v-if="item.iconcolor=='orange'" class="avatar-bottom" src="@appstatic/my/my_icon_avatar_bottom.png" mode=""></image>
							<image v-if="item.iconcolor=='black'" class="avatar-bottom" src="@appstatic/my/my_icon_avatar_bottom_black.png" mode=""></image>
							<image v-if="item.iconcolor=='none'" class="avatar-bottom" src="" mode=""></image>
							
							<view class='text'
								v-if="item.wechatName==''||item.wechatName==null">
								<view v-if="item.phone==null||item.phone==undefined">
									已注销用户
								</view>
								<view v-else>
									{{item.phone.substr(0, 3) + '*****' + item.phone.substr(8)}}
								</view>
							</view>
							
							<view class='text' v-else>{{item.wechatName}}</view>
							
						</view>
					
						<view class="right">
							<button :class="item.foucsStatus==0?'button-unfollow':'button-followed'" @click="followOrNot(item)">{{item.foucsStatus == 0?"关注":"已关注"}}</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	const app = getApp();
	const network = require("@manager/network-manager.js");
	const dialog=require("../../utils/dialog.js");
	
	export default {
		
		data() {
			return {
				color:"#000000",
				text:"粉丝列表",
				userInfo: null,
				
				pagination:{
					loadmore:true,
					page:1,//当前页
					totalPage:1,//总页
					limit:100000,
					length:100
				},
				
				followerList:[],
				authorId:''
			};
		},
		/*uniapp中只有页面 vue 里边有 onLoad，组件 vue里边生命周期都是标准 vue 的生命周期，*/
		onLoad:function(options) {
			//更新已读
			
			if(options && (options.from=="message"||options.from=="notice") && options.myId){
				this.update2Read(options.myId,options.from);
			}
			
			if(options.loginId){
				this.authorId = options.loginId
				
			}
			
		},
		mounted() {
			this.showFollowerList(true);
		},
		methods:{
			//更新已读
			update2Read: function(myId,from) {
				debugger
				var that = this;
				var uri = app.globalData.config.interfaces.URL_SYS_SENDMSG_UPDATE_LEVCMSGUSERREADY;///levc-sys/sendMessage/updateLevcMessageUserReady
				var params = {
					"id": myId,
					"isType": 2
				};
				network.post(uri, params, 'json').then(res => {
					debugger
					if (res.code == 200) {
						console.log("已读", JSON.stringify(res));
						if(from=='message'){
							//回调上一个页面
							let pages = getCurrentPages();
							if(pages.length==3){
								let prePage = pages[pages.length - 2];
								let preprePage=pages[pages.length - 3]
								// #ifdef H5
								prePage.refresh(myId);
								preprePage.refresh();
								// #endif
								// #ifdef APP-PLUS
								prePage.$vm.refresh(myId);
								preprePage.$vm.refresh();
								// #endif
							}
						}else{
							let pages = getCurrentPages();
							let prePage = pages[pages.length - 2];
							// #ifdef H5
							prePage.refresh(myId);
							// #endif
							// #ifdef APP-PLUS
							prePage.$vm.refresh(myId);
							// #endif
						}
						
						util.syncBadge(getApp())
					} else {
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
			
				}).catch(res => {
					uni.showToast({
						title:res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
				});
			},
			handleToLower(){
				//触底
				var that=this;
				if(that.pagination.loadmore){//有下一页
					// that.params.page+=1;
					that.pagination.page+=1;
					this.showFollowerList(false)
				}else{
					uni.showToast({
						title:"暂无更多数据",
						duration: 3000,
						icon: 'none'
					})
				}
			},
			//显示粉丝列表
			async showFollowerList(isRefresh){
				var that=this;
				var uri=app.globalData.config.interfaces.URI_FOLLOWER_LIST;
				var params={
					"pageNum":isRefresh?1:that.pagination.page,
					"pageSize":that.pagination.limit,
					"isType": 1,
					"loginId":this.authorId||app.getUserId()
				};
				network.get(uri,params,'form').then(res=>{
					console.log(res.data);
					if(res.code==200){
						var _list=res.data.list;
						
						if(isRefresh){
							//总页数
							var totalPage=Math.ceil(res.data.total / that.pagination.limit);
							that.pagination.totalPage=totalPage;
							//length
							that.pagination.length=res.data.total;
							//停止下拉
							uni.stopPullDownRefresh()
							that.followerList=_list ? _list:[]
						}else{
							if(_list && _list.length>0){
								that.followerList=[...that.followerList,..._list]
							}
						}
						if(that.pagination.page==that.pagination.totalPage){
							that.pagination.loadmore=false
						}
					}else{
						uni.showToast({
							title:res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch()
			},
			followOrNot(item){
				if(this.authorId){
					return
				}
				console.log(item)
				if(item.foucsStatus==0){//点击按钮回关
					var uri=app.globalData.config.interfaces.URI_COMMUNITY_FOCUS;
					var params={
						"authorId": item.id,
						"fanId": app.getUserId(),
						// "fanId": item.id,
						// "authorId": app.getUserId(),
					};
					network.post(uri,params,'json').then(res=>{
						console.log(res)
						if(res.code==200){
							item.foucsStatus = 2
							
							// this.showFollowerList(true);
							
							
						}else{
							uni.showToast({
								title:res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch()
				}else{//取消关注\
					var uri=app.globalData.config.interfaces.URI_COMMUNITY_FOCUS_CANCEL;
					var params={
						"fanId":app.getUserId(),
						"authorId": item.id,
					};
					network.post(uri,params,'json').then(res=>{
						console.log(res)
						if(res.code==200){
							item.foucsStatus = 0
							// this.showFollowerList(true);
						}else{
							uni.showToast({
								title:res.message,
								duration: 3000,
								icon: 'none'
							})
						}
					}).catch()
				}
			}
		},
		//图片加载错误默认图
		imgerror: function(e, img_index) {
			var _this = this
			if (_this.followerList.length > 0) {
				_this.followerList[img_index].userimages =
					"@appstatic/my/my_icon_avatar_unlogin.png"
			}
		},
		
		
	}
</script>

<style>
	.container {
		width: 100vw;
		height: 100vh;
		background: url("@appstatic/my/my_icon_list_background.jpg") no-repeat;
		background-size: 100vw,100vh;
	}
	.followerlist {
		display: flex;
		flex-direction: column;
		padding-left: 23.5px;
		padding-right: 24.5px;
	}
	.row {
		height: 74px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		vertical-align: middle;
		align-items: center;
	}
	.left {
	  display: flex;
	  vertical-align: middle;
	  align-items: center;
	  flex-direction: row;
	}
	.text {
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		display: flex;
		align-items: center;
	}
	.avature {
		float: left;
		width: 42px;
		height: 42px;
		border-radius: 42px;
		margin-right: 10px;
	}
	.avatar-bottom {
		float: left;
		width: 14px;
		height: 14px;
		position: relative;
		right: 14px;
		top: 15px;
	}
	button::after {
		border: none;
	}
	/* 没回关 */
	.button-unfollow {
		width: 68px;
		height: 25px;
		background-color: #EA5404;
		border-radius: 2px;
		
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		color: #FFFFFF;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	/* 互关 */
	.button-followed {
		width: 68px;
		height: 25px;
		border: 1px solid #EA5404;
		box-sizing: border-box;
		border-radius: 2px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		font-size: 12px;
		line-height: 17px;
		color: #EA5404;
		/* background-color: #FFFFFF; */
	}
	.null {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.null-pic {
		display: flex;
		flex-direction: row;	
		justify-content: center;
	} 
	.null-text {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		color: #ADB0AE;
	}
 
</style>
